<template>
    <div class="demo-card-wide mdl-card mdl-shadow--2dp animate__animated animate__fadeIn">
        <div class="mdl-card__title">
            <h2 class="mdl-card__title-text">发货</h2>
        </div>
        <div class="mdl-card__supporting-text commodity">
            填写发货信息<br>
            <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable">
                <tbody>
                    <tr class="tr">
                        <td class="mdl-data-table__cell--non-numeric">订单信息</td>
                        <td v-if="order != null">
                            单号:{{ order.id }}
                            商品:{{ order.commodity }}
                            收货人:{{ order.buyer }}
                        </td>
                    </tr>
                    <tr class="tr">
                        <td class="mdl-data-table__cell--non-numeric">快递单号</td>
                        <td>
                            <div class="mdl-textfield mdl-js-textfield">
                                <input class="mdl-textfield__input" type="text" id="input_info">
                                <label class="mdl-textfield__label" for="sample1"></label>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="mdl-card__actions mdl-card--border">
            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" @click="backToOrder">
                取消
            </a>
            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" @click="sendButtonOnclick">
                确认发货
            </a>
        </div>
        <div class="mdl-card__menu">
            <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                <i class="material-icons">share</i>
            </button>
        </div>
    </div>
</template>

<script>
export default {
    setup() {
        return {}
    },
    props: [
        "backToOrder"
    ],
    data() {
        return {
            order: null,
        }
    },
    methods: {
        sendButtonOnclick() {
            var info = document.querySelector("#input_info").value
            if (info == "") {
                this.$parent.msg("快递单号不能为空")
            } else {
                this.$axios({
                    method: "post",
                    url: "/merchant/send",
                    dataType: "json",
                    data: {
                        "state": "shipped",
                        "_id": this.order.id,
                        "couriernum": info
                    }
                }).then((res) => {
                    if (res.data.code == "0") {
                        this.$parent.msg("成功发货")
                        this.backToOrder()
                    }
                })
            }
        },
        setInfo(order) {
            this.order = order
        }
    },

}
</script>

<style lang="scss" scoped>
.demo-card-wide.mdl-card {
    width: 512px;
}

.demo-card-wide>.mdl-card__title {
    color: #fff;
    height: 176px;
    background: url('../assets/img/shop.jpg') center / cover;
}

.demo-card-wide>.mdl-card__menu {
    color: #fff;
}

.commodity {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 20px;
    margin: 20px;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

.tr {
    line-height: 60px;
}
</style>